<template>
<div class="">
    <div class="header"  style="padding: 1.3rem 0;">
        <div class="title ocolor" >全方位保障</div>
    </div>
    <div class="support_list">
        <ul>
            <li class="card mobileLayout">
               <div class="card__title">留学前期</div>
               <div class="card__tags">
                   <span class="card__tags--item  ocolor obbcolor">留学背景评估</span>
                   <span class="card__tags--item  ocolor obbcolor">院校专业规划</span>
                   <span class="card__tags--item  ocolor obbcolor">个人软实力提升</span>

               </div>
               <div class=" cover card__image"></div>
            </li>
            <li class="card mobileLayout">
               <div class="card__title">留学申请</div>
               <div class="card__tags">
                   <span class="card__tags--item  ocolor obbcolor">个性化文书</span>
                   <span class="card__tags--item  ocolor obbcolor">留学网申</span>
                   <span class="card__tags--item  ocolor obbcolor">跟踪录取</span>
               </div>
               <div class="card__image card__images cover"></div>
            </li>

            <li class="card mobileLayout">
               <div class="card__title">留学后期</div>
               <div class="card__tags">
                   <span class="card__tags--item  ocolor obbcolor">签证辅导/代办</span>
                   <span class="card__tags--item  ocolor obbcolor">衣食住行盘点</span>
               </div>
               <div class="card__image card__imagess cover"></div>
            </li>
        </ul>
    </div>

    <div
            role="button"
            tabindex="0"
            class="dit-wrapper"
        >
            <div class="dit-button obgcolor">立即开启{{infoList.wap_shot}}留学之旅</div>
        </div>
</div>
</template>

<script>
export default {
  name: 'AllRoundSupport',

}
</script>

<style lang="less">
.container{
  .header{

         .title{
        color: rgb(0, 164, 255);
        font-size: 0.9rem;
        line-height: 0.9rem;
        font-weight: bold;
        text-align: center;
    }
  }
  .support_list{
      .card.mobileLayout {
    box-sizing: border-box;
    padding-left: 1.125rem;
    padding-top: 1.6875rem;
    height: 5.6rem;
    position: relative;
    border-radius: 0.5rem;
    margin: 0.5rem;
}
.card {
    background-color: #eff9ff;
}
  }
  .card.mobileLayout .card__title {
    font-size: 0.8rem;
    color: #2a4154;
    margin-bottom: 0.45rem;
}
.card.mobileLayout .card__tags--item  ocolor obbcolor {
    font-size: 0.6rem;
    background-color: #ffffff;
    border-radius: 0.2rem;
    border: solid 1px #00a4ff;
    color: #26abff;
    padding: 0.175rem 0.275rem;
    line-height: 0.175rem;
    margin-right: 0.3rem;
}
.card.mobileLayout .card__image {
    position: absolute;
    width: 5.85rem;
    height: 4.325rem;
    right: 1.35rem;
    top: 0.625rem;
}
.card__image {
    background-image: url('~@/assets/apply-before.png');
}
.card__images {
    background-image: url('~@/assets/applying.png');
}
.card__imagess {
    background-image: url('~@/assets/apply-after.png');
}
.cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.van-tabs--line .van-tabs__wrap {
    height: auto !important;
}
}

.card.mobileLayout .card__tags--item {
    font-size: 0.6rem;
    background-color: rgb(255, 255, 255);
    border-radius: 0.2rem;
    border: 1px solid rgb(0, 164, 255);
    color: rgb(38, 171, 255);
    padding: 0.175rem 0.275rem;
    line-height: 1;
    margin-right: .3rem;
}
</style>
